<template>
	<view class="">
		<view class="page-bodiv">
			<view class="header-div">
				<view class="reserve-hohte">确认订单</view>
			</view>
			<view class="senior">
				<view class="titl-dac">高级大床客房九寨沟+黄龙+卧龙熊猫谷+都江堰双汽4日跟团游</view>
				<view class="live-date">
					<view class="Trip-da">出行日期</view>
					<view class="ipt-sind" @click="tripmonths">
						<view>{{Trip_date}}</view>
						<view class="iconfont icon-icon"></view>
					</view>
				</view>
				<view class="Detailed-crp">
					<view class="Detailed-crpdbt">成人票</view>
					<view class="Detailed-jj scroll-btn">
						<view class="Minus-sign scroll-chevron glyphicon-chevron-down" @click="reduce">-</view>
						<input class="scroll-txt" type="number" v-model="goodsData.number" disabled='disabled'>
						<view class="plue scroll-chevron glyphicon-chevron-up" @click="add">+</view>
					</view>
				</view>
				<view class="Detailed-crp">
					<view class="Detailed-crpdbt">儿童票</view>
					<view class="Detailed-jj scroll-btn">
						<view class="Minus-sign scroll-chevron glyphicon-chevron-down" @click="cdreduce">-</view>
						<input class="scroll-txt" type="number" v-model="goodsData.child" disabled='disabled'>
						<view class="plue scroll-chevron glyphicon-chevron-up" @click="cdadd">+</view>
					</view>
				</view>
			</view>
			
			<!-- 内容写在这儿，需要增加内容的在content-lista内增加 -->
			<view class="content-lista">
				<view>
					<view class="list-intn">
						<view class="mui-checkbox Insurance">
							<view class="Name-clas" @click="clas_instrence">
								<text class="Cancellation-qxx">国内旅游行保险（含高险）</text>
								<view class="sigh-img"><image src="../../static/images/sigh.png" /></image></view>
							</view>
							<view class="many-yf">￥100元/份</view>
							<view class="value-check">
								<checkbox color="#13b1eb" value="cb" checked="true" style="transform:scale(0.9)"/>
							</view>
							
						</view>
						<view class="mui-checkbox Insurance">
							<view class="Name-clas" @click="clas_instrence">
								<view class="Cancellation-qxx">订单取消险</view>
								<view class="sigh-img"><image src="../../static/images/sigh.png" /></image></view> 
							</view>
							<view class="many-yf">￥100元/份</view>
							<checkbox color="#13b1eb" value="cb" checked="true" style="transform:scale(0.9)"/>
						</view>
						<view class="mui-checkbox Insurance">
							<view class="Name-clas" @click="clas_instrence">
								<view class="Cancellation-qxx">紧急救援险</view>
								<view class="sigh-img"><image src="../../static/images/sigh.png" /></image></view> 
							</view>
							<view class="many-yf">￥100元/份</view>
							<checkbox color="#13b1eb" value="cb" checked="true" style="transform:scale(0.9);"/>
						</view>
						<view class="mui-checkbox Insurance">
							<view class="Name-clas" @click="clas_instrence">
								<view class="Cancellation-qxx">赴日游专属保险</view>
								<view class="sigh-img"><image src="../../static/images/sigh.png" /></image></view> 
							</view>
							<view class="many-yf">￥100元/份</view>
							<checkbox color="#13b1eb" value="cb" checked="true" style="transform:scale(0.9)"/>
						</view>
					</view>
					<view>
						<view class="list-intn" v-for="(actm,index) in gona" :key="index">
							<view class="TouristOne">
								<view class="space"></view>
								<view>{{actm.tourist}}{{index+1}}</view>
							</view>
							<view class="accommodate-ruz">
								<view class="accom-zhujnq">游客姓名</view>
								<view class="ttpt-afr">
									<input type="text" name="" id="" value="" placeholder="请填写游客姓名"/>
									<!-- <view class="ipt-wanzhne">*请填写正确的姓名</view> -->
								</view>
							</view>
							<view class="accommodate-ruz">
								<view class="accom-zhujnq">手机号</view>
								<view class="ttpt-afr">
									<input type="number" name="" id="" value="" placeholder="请填写手机号"/>
									<!-- <view class="ipt-wanzhne">*请填写正确的手机号</view> -->
								</view>
							</view>
							<view class="accommodate-ruz">
								<view class="accom-zhujnq">身份证号</view>
								<view class="ttpt-afr">
									<input type="number" name="" id="" value="" placeholder="请填写身份证号"/>
									<!-- <view class="ipt-wanzhne">*请填写正确的身份证号</view> -->
								</view>
							</view>
						</view>
					</view>
					<view>
						<view class="list-intn" v-for="(children,index) in ticket" :key="index">
							<view class="TouristOne">
								<view class="space"></view>
								<view>{{children.tourist}}{{index+1}}</view>
							</view>
							<view class="accommodate-ruz">
								<view class="accom-zhujnq">儿童姓名</view>
								<view class="ttpt-afr">
									<input type="text" name="" id="" value="" placeholder="请填写游客姓名"/>
									<!-- <view class="ipt-wanzhne">*请填写正确的姓名</view> -->
								</view>
							</view>
							<view class="accommodate-ruz">
								<view class="accom-zhujnq">手机号</view>
								<view class="ttpt-afr">
									<input type="number" name="" id="" value="" placeholder="请填写手机号"/>
									<!-- <view class="ipt-wanzhne">*请填写正确的手机号</view> -->
								</view>
							</view>
							<view class="accommodate-ruz">
								<view class="accom-zhujnq">身份证号</view>
								<view class="ttpt-afr">
									<input type="number" name="" id="" value="" placeholder="请填写身份证号"/>
									<!-- <view class="ipt-wanzhne">*请填写正确的身份证号</view> -->
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="zwf"></view>
		</view>
		<view class="Submission">
			<view>
				<view class="On-linejg">￥888.00</view>
				<view class="ctnr-linejg">在线支付</view>
			</view>
			<input type="button" name="" id="" value="提交订单" disabled="disabled" @click="mission"/>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				Trip_date:'请选择',
				goodsData:{
					number:'0',
					child:'0'
				},
				gona:[],
				ticket:[],
				// list:[],
				not: {
					tourist:'成人游客'
				},
				got: {
					tourist:'儿童游客'
				}
			}
		},
		onShow(options){
			let cenTendate = uni.getStorageSync("current_date");
			this.Trip_date = cenTendate.date.month+'月'+cenTendate.date.day+'日'
		},
		methods:{
			// 成人点击增加
			add(){
				if(this.goodsData.number<20){
					this.goodsData.number++;
					// 添加
					this.gona.push(this.not)
				}else{
					uni.showToast({
						title: '不能超过20张',
						duration: 2000
					});
				}
			},
			// 成人点击减少
			reduce(){
				if(this.goodsData.number>0){
					this.goodsData.number--;
					// 删除
					this.gona.splice(this.not,1)
				}else{
					uni.showToast({
						title: '不能少于0张',
						duration: 2000
					});
				}
			},
			
			// 儿童点击增加
			cdadd(){
				if(this.goodsData.child<20){
					this.goodsData.child++;
					this.ticket.push(this.got)
				}else{
					uni.showToast({
						title: '不能超过20张',
						duration: 2000
					});
				}
			},
			// 儿童点击减少
			cdreduce(){
				if(this.goodsData.child>0){
					this.goodsData.child--;
					this.ticket.splice(this.got,1)
				}else{
					uni.showToast({
						title: '不能少于0张',
						duration: 2000
					});
				}
			},
			mission(){
				uni.navigateTo({
					url:'../personalcenter/order/hotelorder'
				})
			},
			tripmonths:function(){
				uni.navigateTo({
					url:'line-calendar'
				})
			},
			clas_instrence:function(){
				uni.navigateTo({
					url:'Insurance'
				})
			}
		}
	}
</script>

<style>
	@import "../../components/line/line-reserve";
	@import "../../common/iconfont.css";
	@font-face {
	       font-family: 'iconfont';
		    src: url('~@/static/iconfont.ttf');
	}
</style>
